<template>
  <div>
    <p>获取state数据</p>
    <div>{{count}}</div>
    <div>
      <button @click="add">+</button>
      <button @click="reduce(2)">-</button>
    </div>
    <p>改变state数据</p>
    <div>{{count}}</div>
    <div>
      <!-- <button @click="addAction">+</button>
      <button @click="reduceAction(2)">-</button> -->

      <!-- 不引入 // import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';方式的使用mutations-->
      <p>mutations</p>
      <button @click="$store.commit('add')">+</button>
      <button @click="$store.commit('reduce',2)">-</button>

      <!-- 不引入 // import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';方式的使用action方法-->
      <p>actions</p>
      <button @click="$store.dispatch('addAction')">+</button>
      <button @click="$store.dispatch('reduceAction',2)">-</button>
    </div>

    <!-- getters -->
    <!-- <div>{{toNum}}</div> -->
    <!-- <div>{{toToNum}}</div> -->

    <router-link to="getState">跳转到别的页面获取vuex的值</router-link>

    <p @click='actionsClick'>点击在js中使用actions</p>
  </div>
</template>
<script>
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
  export default{
    data(){
      return{}
    },
    computed:{
      // ...mapState(['num'])  //不是模块的时候获取数据
      count(){  //模块获取数据,           JS  // console.log(this.count);  获取模块组数据
        return this.$store.state.option.num
      },

      // ...mapGetters(['toNum']),  //
      toToNum(){
        return this.$store.getters.toNum;
      }


    },
    created(){


      // 调用action方法，在JS里面，也可以通过import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
      // setTimeout(() => {
      //   this.$store.dispatch('reduceAction',2);  //返回的是promise对象
      // }, 2000);
      // console.log(this.$store.dispatch('reduceAction',2));
    },
    methods:{
      // 在html里面调用,方法直接写（addAction等）          如果想在JS里面用，    使用this.addAction的方式
      ...mapMutations(['add','reduce']),
      // ...mapActions(['addAction','reduceAction']),

      // 注，mutations不支持异步操作，异步操作放在actions中


      actionsClick(){
        this.add();
      }
    }
  }



</script>
